<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    <script src="../js/jquery-1.7.1.min.js"></script>
    <script type='js/swiper-3.4.2.min.js'></script>
    <script type="text/javascript" src="../js/swiper-3.4.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/detial.css"/>
    <link href="../css/css.css" rel="stylesheet" type="text/css">
    <script src='../js/layer/2.1/layer.js'></script>
    <style>
        /*礼品兑换区*/
        .regularly_title {
            width: 25%;
            height: 41px;
            font-size: 16px;
            line-height: 41px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            color: #191919;
        }

        .regularly_title .border_top {
            width: 160%;
            top: 20px;
        }

        /*底部导航*/
        .nav_box {
            width: 100%;
            height: 51px;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
        }

        .nav_index,.nav_mys, .nav_order, .nav_my {
            width: 25%;
            float: left;
        }

        .nav_box img {
            width: 18px;
            height: auto;
            position: relative;
            left: 50%;
            margin-left: -9px;
            margin-top: 8px;
        }

        .nav_box h1 {
            font-size: 12px;
            text-align: center;
            color: #65646b;
            line-height: 25px;
        }

        .nav_box .current_nav {
            color: #01aff0;
        }

        .touxiang{
            width: 30%;
            float: left;
            margin-left: 3%;
            height: 14vh;
        }
        .touxiang img{
            height: 75%;
            width: 75%;
            margin-top: 10%;
            margin-left: 10px;
            border-radius: 50%;
        }
        .lists p{
            font-size: 10px;
        }
    </style>
</head>
<body>
<div class="header">活动
</div>

<div class="lunbo">
    <!--<div class="swiper-container">-->
        <!--<div class="swiper-wrapper">-->
            <!--&lt;!&ndash;<div class="swiper-slide"><a class="sites"><img src="img/sw7.jpg"></a></div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="swiper-slide"><a class="sites"><img src="img/sw2.jpg"></a></div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="swiper-slide"><a class="sites"><img src="img/sw6.jpg"></a></div>&ndash;&gt;-->
        <!--</div>-->
        <!--<div class="swiper-pagination"></div>-->
    <!--</div>-->
</div>
<div class="search" onclick="document.location='seachPage.html';">
    <span class="s_con"><input type="text" class="content" placeholder="请输入你想要兑换礼品"><i class="clear"></i></span>
    <span class="s_btn">搜索</span>
</div>
<!--礼品兑换区-->
<div class="regularly_title">礼品兑换区
    <div class="border_top" style="left:-100%;"></div>
    <div class="border_top" style="left:inherit;right:-100%;"></div>
</div>
<!--常用服务-->
<div id="tuijian" style="height: 100%;overflow: hidden">

</div>

<!--底部导航-->
<div class="nav_box">
    <div class="border_top"></div>
    <div class="nav_index chenge" onclick="document.location='index.html';">
        <img src="../images/activity-l.png">

        <h1 style="color:#01AFF0">活动奖项</h1>
    </div>
    <div class="nav_mys chenge" onclick="document.location='change.html';">
        <img src="../images/change.png">

        <h1>兑换奖章</h1>
    </div>
    <div class="nav_my chenge" onclick="document.location='shezhi.html';">
        <img src="../images/jiang.png">

        <h1>我的奖章</h1>
    </div>
    <div class="nav_order chenge" onclick="document.location='myorder.html';">
        <img src="../images/user.png">

        <h1>我的奖品</h1>
    </div>
</div>
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script>
    //底部导航
    $(".chenge:eq(0)").click(function () {
        $(".chenge:eq(0) img").attr("src", "images/index_blue.png");
        $(".chenge:eq(0) h1").css({color: '#01AFF0'});
        $(".chenge:eq(1) img").attr("src", "images/order_gray.png");
        $(".chenge:eq(1) h1").css({color: ''});
        $(".chenge:eq(2) img").attr("src", "images/my_gray.png");
        $(".chenge:eq(2) h1").css({color: ''});
    });
    $(".chenge:eq(1)").click(function () {
        $(".chenge:eq(1) img").attr("src", "images/order_blue.png");
        $(".chenge:eq(1) h1").css({color: '#01AFF0'});
        $(".chenge:eq(0) img").attr("src", "images/index_gray.png");
        $(".chenge:eq(0) h1").css({color: ''});
        $(".chenge:eq(2) img").attr("src", "images/my_gray.png");
        $(".chenge:eq(2) h1").css({color: ''});

    });
    $(".chenge:eq(2)").click(function () {
        $(".chenge:eq(2) img").attr("src", "images/my_blue.png");
        $(".chenge:eq(2) h1").css({color: '#01AFF0'});
        $(".chenge:eq(0) img").attr("src", "images/index_gray.png");
        $(".chenge:eq(0) h1").css({color: ''});
        $(".chenge:eq(1) img").attr("src", "images/order_gray.png");
        $(".chenge:eq(1) h1").css({color: ''});
    });
    //动态改变轮播图片
    lunbo();
    function  lunbo(){
        var str="";
        console.log("666");
            str =   '<div class="swiper-container">'+
                    '<div class="swiper-wrapper">'+
                    '<div class="swiper-slide"><a class="sites"><img src="../img/sw7.jpg"></a></div>'+
                    '<div class="swiper-slide"><a class="sites"><img src="../img/sw2.jpg"></a></div>'+
                    '<div class="swiper-slide"><a class="sites"><img src="../img/sw6.jpg"></a></div>'+
                    '<div class="swiper-pagination"></div>'+
                    '</div>'+
                    '</div>';

        $(".lunbo").append(str);

    }

    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'horizontal',
        loop: true,
        autoplay: 2500,
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplayDisableOnInteraction: false
    });
    $.ajax({
        url:urls+'/prize/frontfindPrizeList',
//        dataType:"json",
        timeout:4000,
        type:"POST",
        success:function(req){
            console.log(req);

            if(req.length>0){
                var strs="";
                var paths="";
                for(var i=0;i<req.length;i++){
                	
                    (req[i].name==""||req[i].name==null)? req[i].name="没有标题":req[i].name;
                    (req[i].medalCount=="")? req[i].name="0":req[i].medalCount;
                    (req[i].startTime==""|| req[i].startTime==null)? req[i].startTime="0000-00-00":req[i].startTime.substr(0,10);
                    (req[i].endTime=="" ||req[i].endTime==null)? req[i].endTime="0000-00-00":req[i].endTime.substr(0,10);
                     paths=urls+req[i].prizeImgurl;
                    (req[i].prizeImgurl=="" || req[i].prizeImgurl==null)? paths="../upload/present.jpg":paths;
                   
                    strs = strs+ '<div class="lists"> ' +
                            '<div class="touxiang"><img src="'+paths+'"></div> ' +
                            '<div class="jianjie"> ' +
                            '<p><span>'+req[i].name+'</span><span class="userAds">'+"兑换所需奖章"+req[i].medalCount+'枚'+'</span></p> ' +
                            '<p style="margin-top: 2vh"><span>'+req[i].startTime.substr(0,10)+'</span><span id="jz_center">'+"&nbsp;->&nbsp;"+req[i].endTime.substr(0,10)+'</span></p> ' +
                            '</div>' +
                            '<div class="jiantou"><a href="spList.html?id='+req[i].id+'"><img src="../img/arr-right.png"></a></div> ' +
                            '</div>'
                }
                $("#tuijian").append(strs);
            }
//            layer.msg("你好");


        },
        error:function(){

        }
    });
</script>
</html>
